<script setup lang="ts">
import {Document, Menu as IconMenu, Location, Setting,} from '@element-plus/icons-vue'
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <div class="common-layout">
    <el-container >
      <!--    左侧菜单-->
      <el-aside style="width: 27vh">
        <el-col>
          <h2 class="mb-2" style="text-align: center;">春秋</h2>
          <el-menu
              default-active="notice"
              class="el-menu-vertical-demo"
              router="true"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-menu-item index="notice">
              <el-icon><icon-menu /></el-icon>
              <span>站点公告</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><location /></el-icon>
                <span>网课管理</span>
              </template>
              <el-menu-item index="courseadd">订单提交</el-menu-item>
              <el-menu-item index="courselist">订单列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><location /></el-icon>
                <span>打卡下单</span>
              </template>
              <el-menu-item index="cat">CAT打卡</el-menu-item>
              <el-menu-item index="ai">AI打卡</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><location /></el-icon>
                <span>跑步下单</span>
              </template>
              <el-menu-item index="pan">盘古运动</el-menu-item>
              <el-menu-item index="lei">雷电运动</el-menu-item>
              <el-menu-item index="jing">鲸鱼运动</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><location /></el-icon>
                <span>充值入口</span>
              </template>
              <el-menu-item index="online">在线充值</el-menu-item>
              <el-menu-item index="carmine">卡密充值</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="6">
              <template #title>
                <el-icon><location /></el-icon>
                <span>个人中心</span>
              </template>
              <el-menu-item index="user">个人主页</el-menu-item>
              <el-menu-item index="agent">代理管理</el-menu-item>
              <el-menu-item index="log">操作日志</el-menu-item>
              <el-menu-item index="changepasswd">修改密码</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><location /></el-icon>
                <span>对接说明</span>
              </template>
              <el-menu-item index="document">对接文档</el-menu-item>
              <el-menu-item index="price">网课单价</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-aside>

      <!--    右侧-->
      <el-container>
        <el-header> </el-header>

        <el-main >
          <router-view/>
        </el-main>

        <el-footer>
          <el-row>
            <el-col span="10">
              <a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备2023010451号</a><br>
            </el-col>
            <el-col span="10" style="margin-left: 15px">
              <a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备2023010451号-1</a>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-aside {
  height: 100vh;
}
.el-header {

}
.el-main{
  margin-top: 5px;

}
.el-footer{

}
</style>
